// 清除默认样式
@use './reset.scss';

// 根节点 变量
@use './root.scss';

// 字体
@use '../font/index.scss';

@use './common.scss';

// element-plus 重置样式
@forward '../element/reset.scss';

@forward './class.scss';

// 滚动条整体样式
::-webkit-scrollbar {
  width: var(--scroll-width); // 高宽分别对应横竖滚动条的尺寸
  height: var(--scroll-height);
}

// 滚动条里面小方块
::-webkit-scrollbar-thumb {
  min-height: 28px;
  border-radius: 9px;
  background-color: var(--scroll-color);
  background-clip: padding-box;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-hover-color);
}

// 滚动条里面轨道
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 9px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

// 滚动条凹槽的颜色，还可以设置边框属性
::-webkit-scrollbar-track-piece {
  background-color: #f8f8f8;
}

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  color: var(--z-text-color);
  height: 100%;
  font-family: var(--font-family);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 浅色主题
@media (prefers-color-scheme: light) {
  body {
    // background-color: var(--z-fill-color-disabled);
  }
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.no-padding {
  padding: 0px !important;
}

.padding-content {
  padding: 4px 0;
}

.clearfix {
  &:after {
    clear: both;
    height: 0;
    display: block;
    content: ' ';
    font-size: 0;
    visibility: hidden;
  }
}

// 间距
.m-l-auto {
  margin-left: auto;
}

// 浮动
.fr {
  float: right;
}

.fl {
  float: left;
}

.block {
  display: block;
}

.pointer {
  cursor: pointer;
}

.inline-block {
  display: inline-block;
}

// 边框
.br {
  border: 1px solid var(--z-border-color);
}

.br-t {
  border-top: 1px solid var(--z-border-color);
}

.br-l {
  border-left: 1px solid var(--z-border-color);
}

.br-r {
  border-right: 1px solid var(--z-border-color);
}

.br-b {
  border-bottom: 1px solid var(--z-border-color);
}

.br-tb {
  border-top: 1px solid var(--z-border-color);
  border-bottom: 1px solid var(--z-border-color);
}

.br-lr {
  border-left: 1px solid var(--z-border-color);
  border-right: 1px solid var(--z-border-color);
}

// 文字对齐
.t-l,
.text-left {
  text-align: left;
}

.t-r,
.text-right {
  text-align: right;
}

.t-c,
.text-center {
  text-align: center;
}

// 齐行改变单词间的间隔 仅IE有效
.t-j,
.text-justify {
  text-align: justify;
}

// 单行文字溢出省略
.nowrap {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 多行文字溢出省略
.nowrap-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

// 强制英文单词断行
.text-breakall {
  word-break: break-all;
}

// 全部小写
.text-lowercase {
  text-transform: lowercase;
}

// 全部大写
.text-uppercase {
  text-transform: uppercase;
}

// 首字母大小
.text-capitalize {
  text-transform: capitalize;
}

// 不可选中
.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently */
}

// 阿里字体
.iconfont {
  display: inline-block;
  font-size: inherit;
}

// click
.click-o {
  &:active {
    opacity: 0.6;
  }
}

.amount {
  font-family: 'HelveticaNene';
}

.h-100 {
  height: 100%;
}

.mh-100 {
  max-height: 100%;
}

.o-a {
  overflow: auto;
}

.o-h {
  overflow: hidden;
}

/* flex */
.flex {
  display: flex;
}

.row-flex {
  display: flex;
  flex-direction: row;
}

.col-flex {
  display: flex;
  flex-direction: column;
}

.flex-jc {
  justify-content: center;
}

.flex-jb {
  justify-content: space-between;
}

.flex-je {
  justify-content: flex-end;
}

.flex-js {
  justify-content: flex-start;
}

.flex-ac {
  align-items: center;
}

.flex-w {
  flex-wrap: wrap;
}

.f-x {
  flex: 1;
}

/* font */
.font-w {
  font-weight: bold;
}

// 书写方向
.w-tb-rl {
  writing-mode: vertical-rl;
}

.w-tb-lr {
  /*从左向右 从右向左是 writing-mode: vertical-rl;*/
  writing-mode: vertical-lr;
}

/* 特殊滚动 */
.special-scroll {
  overflow-y: auto;
}

.special-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.special-scroll::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #d8dce5;
}

.special-scroll::-webkit-scrollbar-thumb {
  background-color: #adadad;
  border-radius: 5px;
}

.special-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #666;
}

.special-scroll::-webkit-scrollbar-corner {
  background-color: #535353;
}

.special-scroll::-webkit-scrollbar-resizer {
  background-color: #ff6e00;
}
